<template>
  <el-dialog v-if="modelValue" :model-value="modelValue" :title="title" width="500" @update:model-value="updateModelValue">
    <el-form :model="formData" label-width="120px">
      <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label">
        <el-input
          v-if="field.type === 'input'"
          v-bind="field.props"
          v-model="formData[field.name]"
        ></el-input>

        <el-input
          v-if="field.type === 'textarea'"
          type="textarea"
          v-bind="field.props"
          v-model="formData[field.name]"
        ></el-input>

        <el-select
          v-if="field.type === 'select'"
          v-bind="field.props"
          v-model="formData[field.name]"
        >
          <el-option
            v-for="option in field.props.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>

        <div v-if="field.type === 'upload'">
          <el-upload
            :action="field.props.action"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
            :file-list="formData[field.name]"
            list-type="picture-card"
          >
            <img v-if="formData[field.name] && formData[field.name].length > 0" :src="formData[field.name][0].url" class="avatar" />
            <i v-else class="el-icon-plus">
              <el-icon><Plus /></el-icon>
            </i>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">Cancel</el-button>
        <el-button type="primary" @click="handleSubmit">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { ref, defineProps, defineEmits, computed, h } from 'vue';
import { ElInput, ElSelect, ElOption, ElUpload } from 'element-plus';
import { showNotification } from '@/services/notificationService';
import { Plus } from '@element-plus/icons-vue';

interface FormField {
  name: string;
  label: string;
  type: string;
  props?: any;
}

const props = defineProps<{
  modelValue: boolean;
  title: string;
  currentData?: any; // 新增这一行
  formFields: FormField[];
  onSubmit: (formData: any) => void;
}>();

const emit = defineEmits(['update:modelValue']);

// const formData = ref<any>({});
// 初始化 formData
const formData = ref<any>({ ...props.currentData });
watch(() => props.currentData, (newVal) => {
  formData.value = { ...newVal }; // 当 currentData 变化时，更新 formData
});

const updateModelValue = (value: boolean) => {
  emit('update:modelValue', value);
};

const closeDialog = () => {
  updateModelValue(false);
};

const handleSubmit = () => {
  props.onSubmit(formData.value);
  closeDialog();
};

const handleUploadSuccess = (response: any, file: any, fileList: any) => {
  const fieldName = props.formFields.find(field => field.type === 'upload')?.name;
  if (fieldName) {
    formData.value[fieldName] = [{ url: URL.createObjectURL(file.raw) }];
  }
};

const beforeUpload = (file: any) => {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    showNotification('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    showNotification('图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
};
</script>

<style scoped lang='stylus'>
.dialog-footer
  text-align right

.avatar
  width: 100%
  height: 100%
  display: block
</style>